﻿
@{
    ViewData["Title"] = "Main";
}
<style>
    #content {
        background-color: black;
        padding-top: 20px;
    }

    #right {
        background-color: black;
        padding: 1px 1px 1px 1px;
    }

    #main {
        background-color: black;
        border: 5px solid rgb(135,125,112);
    }

    #left {
        background-color: black;
        padding: 1px 1px 1px 1px;
    }

    #right-content {
        margin: 5px 5px 5px 5px;
        background-color: rgb(174,165,132);
    }

    #left-content {
        margin: 5px 5px 5px 5px;
        background-color: rgb(174,165,132);
    }

    #main-content {
        background-color: rgb(174,165,132);
    }

    #Option {
        margin-top: 50px
    }

        #Option > div {
            margin-top: 50px;
        }

    .option-content :hover {
        background-color: aqua;
        color: aquamarine;
    }

    .main-content-img {
        margin-top: 20px;
    }

    .main-content-text {
        margin-top: 20px;
    }

    .option-content {
        background-color: rgb(187,165,125);
        border: 3px solid rgb(135,125,112);
    }

        .option-content:hover {
            background-color: rgb(200,195,165);
        }

    .status-row {
        padding: 10px 10px 10px 10px;
    }

    .nav-tabs {
        border-bottom: 1px hidden #ddd;
    }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border-color: rgb(174,165,132);
            background-color: rgb(174,165,132);
        }

        .nav-tabs > li > a {
            color: white;
            border-radius: 0px 0px 0px 0px;
        }
</style>



<div class="container-fluid" id="content">
    <div class="col-md-3" id="left">
        <div id="left-content">
            <ul class="nav nav-tabs" style="background-color:black">
                <li class="active">
                    <a href="#Status" data-toggle="tab">属性</a>
                </li>
                <li>
                    <a href="#Item" data-toggle="tab">物品</a>

                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade in active row" id="Status">

                </div>
                <div class="tab-pane fade row" id="Item">

                </div>
            </div>
        </div>
    </div>
    <div id="main" class="col-md-6 container-fluid">
        <div id="main-content">
            <div class="container-fluid">
                <div class="col-md-8 main-content-text">
                    <div id="Text">
                        @Html.Raw(ViewBag.StoryCard.Text)
                    </div>
                    <div class="row" id="Option">
                        @foreach (var option in ViewBag.StoryOptions)
                        {
                            if (option.hidden)
                            {

                                <button hidden type="button" class="btn-default" onclick="NextCard('@option.ID')">@option.Text</button>

                            }
                            else
                            {

                                <button type="button" class="btn-default" onclick="NextCard('@option.ID')">@option.Text</button><p></p>
                            }

                        }
                    </div>
                </div>
                <div class="col-md-4 main-content-img">
                    <div id="Img">
                        <img src="@ViewBag.StoryCard.IMG" class="img-responsive" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="right" class="col-md-3">
        <div id="right-content">
            <ul class="nav nav-tabs" style="background-color:black">
                <li class="active">
                    <a href="#Task" data-toggle="tab">事件</a>

                </li>
                <li>
                    <a href="#History" data-toggle="tab">历史</a>

                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade in active row" id="Task">

                </div>
                <div class="tab-pane fade row" id="History">

                </div>
            </div>
        </div>
    </div>
</div>




<script>

    //初始读取
    window.onload = function () {
        GetItem('@ViewBag.StoryCard.StorySeriesID');
        GetState();
        GetSchedule();
        SetHeight();
    }

    function NextCard(optionID) {

        $.post(
            '/Main/NextCard',
            { optionID: optionID },
            function (result) {
                if (result == "GameOver") {
                    window.location.href = '/Main/StorySelect/'
                }
                else if (result == "TestOver") {
                    window.location.href = '/Creator/'
                }
                CleanContent();
                AddContent(result.text, result.img);
                AddOption(result.storyOptions)
                GetState();
                GetItem();
                GetSchedule();
                GetHistory();
            }
        )
    }

    //添加选项
    function AddOption(option) {
        for (var i in option) {
            $('#Option').append("<button  type='button' class='btn-default' onclick = NextCard('" + option[i].id + "')>" + option[i].text + "</button><p></p>")
        }
    }
    //添加内容框内容
    function AddContent(text, img) {
        $("#Img img").attr("src",img);
        $('#Text').append(text);
    }
    //清除内容框
    function CleanContent() {
        $('#Text').empty();
        $("#Img img").attr("src", "");
        $('#Option').empty();
    }

    //设置主界面高度
    function SetHeight() {
        let contentheight = $("#content").height();
        let windowheight = window.innerHeight * 2 - window.outerHeight;
        let h = contentheight > windowheight ? contentheight : windowheight;
        $("#content").css("min-height", windowheight+50);
        $("#left-content").css("min-height",windowheight-20);
        $("#right-content").css("min-height",windowheight-20);
        $("#main-content").css("min-height",windowheight-20);
    }

    //获取人物状态
    function GetState() {
        $.get('/Main/GetState', function (data) {
            LoadRow(data, "Status");
        })
    }

    //获取人物背包
    function GetItem(StorySeriesID) {
        $.get('/Main/GetItem', {StorySeriesID:StorySeriesID}, function (data) {
            let jsonObj = JSON.parse(data);
            let html = '';
            for (let i in jsonObj) {

                html += "<div class='row'>" + jsonObj[i].Name + ":<div id=item" + jsonObj[i].ID + ">" +
                    jsonObj[i].Amount + "</div><button onclick='useItem(" + jsonObj[i].ID + ")'>使用</button></div>"
            }
            let content = "<div class='row'>" + html + "</div>";
            $("#Item").append(content);
        });
    }

    function useItem(itemID) {
        $.post('/Main/useItem', { itemID: itemID }, function (data) {
            if (data == 'true') {
                let num = $("#item" + itemID).val();
                $("#item" + itemID).val() = num--;

            }
            else {
                alert('发生错误！')
            }
        });
    }

    //获取任务列表
    function GetSchedule() {
        $.get('/Main/GetSchedule', function (data) {
            let jsonObj = JSON.parse(data);
            let html = '';
            for (let i in jsonObj) {
                html += "<div class='row'>" + jsonObj[i].SeriesName + ":" + jsonObj[i].Text + "</div>"
            }
            let content = "<div class='row'>" + html + "</div>";
            $("#Schedule").append(content);
        });
    }

    //获取任务历史
    function GetHistory() {
        $.get('/Main/GetHistory', function (data) {

        });
    }


    //人物创建Json的行
    function LoadRow(json, traget) {
        debugger
        $("#" + traget).empty();
        let jsonObj = JSON.parse(json);
        let html = '';
        for (let i in jsonObj) {
            html += "<div class='status-row row'>" + i + ":" + jsonObj[i] + "</div>"
        }
        let content = "<div class='row'>" + html + "</div>";
        $("#" + traget).append(content);
    }
</script>
